<template>
    <div>
        <van-tabs v-model="active" @click="tabsClick()" title-active-color="#5ca1ee" color="#5ca1ee">
            <van-tab title="待付款">
                <orderList ref="orderChild" :status="status"></orderList>
            </van-tab>
            <van-tab title="待发货">
                <orderList ref="orderChild" :status="status"></orderList>
            </van-tab>
            <van-tab title="待收货">
                <orderList ref="orderChild" :status="status"></orderList>
            </van-tab>
            <van-tab title="已完成">
                <orderList ref="orderChild" :status="status"></orderList>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import orderList from './add/orderlist'
export default {
    data(){
        return{
            active:0,
            status:this.$route.query.taber
        }
    },
    components:{
        orderList
    },
    mounted(){
        if(this.$route.query.taber == 10){
            this.active = 0
        }else if(this.$route.query.taber == 20){
            this.active = 1
        }else if(this.$route.query.taber == 30){
            this.active = 2
        }else{
            this.active = 3
        }
        setTimeout(()=>{
            this.$refs.orderChild.onLoad()
        },50)
    },
    methods:{
        //tab切换
        tabsClick(){
            if(this.active == 0){
                this.status = 10
            }else if(this.active == 1){
                this.status = 20
            }else if(this.active == 2){
                this.status = 30
            }else{
                this.status = 50
            }
            this.$router.push({
                name:'order',
                query:{
                    taber:this.status
                }
            })
            setTimeout(()=>{
                this.$refs.orderChild.onLoad()
            },50)
        },
    }
}
</script>


